<template>
  <div>
    <v-dialog v-model="dialog.visible" persistent max-width="768">
      <v-card>
        <v-card-title v-if="data.id===''" class="headline">新建运动处方步骤</v-card-title>
        <v-card-title v-else class="headline">修改运动处方步骤</v-card-title>
        <v-card-text>
          <v-container class="pb-0" grid-list-md>
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-layout wrap align-center>
                <v-flex xs12 sm6>
                  <v-text-field :rules="rule.name" label="步骤名称" v-model="data.name" required></v-text-field>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-text-field :rules="rule.title" label="步骤标题" v-model="data.title" required></v-text-field>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-text-field :rules="rule.practiceNum" label="组数" v-model="data.practiceNum" required></v-text-field>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-text-field :rules="rule.practiceTime" label="训练时间(秒)" v-model="data.practiceTime" required></v-text-field>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-text-field :rules="rule.intervalTime" label="间歇时间(秒)" v-model="data.intervalTime" required></v-text-field>
                </v-flex>
                <v-flex xs12 class="ml-0 mr-0 mt-0 mb-0"/>
                <v-flex xs12>
                  <editor base="prescription/" :plugins="[]" :content="data.content" @content="updateContent"></editor>
                </v-flex>
              </v-layout>
            </v-form>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="dialog.visible=false">关闭</v-btn>
          <v-btn color="green darken-1" flat @click="createUpdatePrescriptionItem">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { putPrescriptionItem, postPrescriptionItem } from '../../api/prescription'
import editor from '../../components/Editor'
export default {
  name: 'SubDialog',
  components: {
    editor
  },
  props: {
    prescriptionId: {}
  },
  data: () => ({
    dialog: {
      visible: false
    },
    valid: true,
    data: {
      id: '',
      name: '',
      title: '',
      practiceNum: '',
      practiceTime: '',
      intervalTime: '',
      content: ''
    },
    rule: {
      name: [v => !!v || '步骤名称必须填写', v => (v && v.length <= 255) || '步骤名称必须小于255个字符'],
      title: [v => !!v || '步骤标题必须填写', v => (v && v.length <= 255) || '步骤标题必须小于255个字符'],
      practiceNum: [v => !!(v.toString()) || '组数必须填写', v => (v.toString() && (/(^0$)|(^[1-9]\d*$)/.test(v.toString()))) || '组数必须是自然数'],
      practiceTime: [v => !!(v.toString()) || '训练时间必须填写', v => (v.toString() && (/(^0$)|(^[1-9]\d*$)/.test(v.toString()))) || '训练时间必须是自然数'],
      intervalTime: [v => !!(v.toString()) || '间歇时间必须填写', v => (v.toString() && (/(^0$)|(^[1-9]\d*$)/.test(v.toString()))) || '间歇时间必须是自然数']
    }
  }),
  methods: {
    updateContent (data) {
      this.data.content = data
    },
    show () {
      this.dialog.visible = true
    },
    createUpdatePrescriptionItem () {
      if (this.$refs.form.validate()) {
        if (this.data.id === '') {
          let data = {
            prescriptionId: this.prescriptionId,
            name: this.data.name,
            title: this.data.title,
            practiceNum: parseInt(this.data.practiceNum),
            practiceTime: parseInt(this.data.practiceTime),
            intervalTime: parseInt(this.data.intervalTime),
            content: this.data.content
          }
          putPrescriptionItem(data).then((res) => {
            this.$emit('update')
            this.dialog.visible = false
          })
        } else {
          let data = {
            id: this.data.id,
            prescriptionId: this.prescriptionId,
            name: this.data.name,
            title: this.data.title,
            practiceNum: parseInt(this.data.practiceNum),
            practiceTime: parseInt(this.data.practiceTime),
            intervalTime: parseInt(this.data.intervalTime),
            content: this.data.content
          }
          postPrescriptionItem(data).then((res) => {
            this.$emit('update')
            this.dialog.visible = false
          })
        }
      }
    },
    get (data) {
      this.data = data
    },
    clear () {
      this.data = {
        id: '',
        name: '',
        title: '',
        practiceNum: '',
        practiceTime: '',
        intervalTime: '',
        content: ''
      }
    }
  }
}
</script>

<style scoped>

</style>
